<template>
  <div class="rightbox" v-cloak>
    <h1>新增排班</h1>
    <el-row style="width: 96%;margin:2%;min-width:800px;">
      <div :span="3" style="float: left;width:150px;">
        <el-select v-model="doctorindex" multiple placeholder="请选择医生">
          <el-option
            v-for="item in doctorData"
            :key="item.doctorindex"
            :label="item.name"
            :value="item.doctorindex">
          </el-option>
        </el-select>
      </div>
      <div :span="3" style="margin-left:20px;float: left;width:150px;">
        <el-date-picker
          style="width:150px;"
          v-model="starttime"
          type="date"
          placeholder="开始日期">
        </el-date-picker>
      </div>
      <div :span="3" style="margin-left:20px;float: left;width:150px;">
        <el-date-picker
          style="width:150px;"
          v-model="endtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期">
        </el-date-picker>
      </div>
      <div :span="1" style="margin-left:20px;float: left;width:200px;">
        <el-button type="primary" @click="Search">查询</el-button>
        <el-button type="primary" @click="Sumbit">提交排班</el-button>
      </div>
    </el-row>
    <el-table
      style="width: 96%;margin:2%;"
      :data="timeList"
      border>
      <el-table-column
        label="日期"
        width="150">
        <template slot-scope="scope">
          <div>{{scope.row.time.split(' ')[0]}}</div>
          <div>{{scope.row.weekModel.weekStr}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="week"
        label="医生"
      >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.doctorList" :key="index" style="float:left;border-right: #dbdbdb solid 1px;margin-left:20px;">
            <div>{{item.name}}</div>
            <div style="width:100px">
              <el-radio label="1" size="mini" v-model="item.weekModel.time"  @change="item.weekModel.timestr = '上午'">上午</el-radio>
              <el-radio style="margin-left: 0;" label="2" size="mini" v-model="item.weekModel.time"  @change="item.weekModel.timestr = '下午'">下午</el-radio>
              <el-radio style="margin-left: 0;" label="3" size="mini" v-model="item.weekModel.time"  @change="item.weekModel.timestr = '全天'">全天</el-radio>
              <el-radio style="margin-left: 0;" label="0" size="mini" v-model="item.weekModel.time"  @change="item.weekModel.timestr = ''">不排班</el-radio>
              <div>预约数:</div>
              <el-input style="width:50px" size="mini" v-model="item.total"></el-input>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      doctorData: [],
      starttime: '',
      endtime: '',
      doctorindex: [],
      timeList: []
    }
  },
  methods: {
    Search: function () {
      var that = this
      that.getList()
    },
    getList: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/Dutyday/Add', qs.stringify({
        starttime: that.starttime,
        endtime: that.endtime,
        doctorindex: that.doctorindex
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            for (var i = 0; i < res.data.data.length; i++) {
              for (var j = 0; j < res.data.data[i].doctorList.length; j++) {
                res.data.data[i].doctorList[j].weekModel.time = res.data.data[i].doctorList[j].weekModel.time + ''
              }
            }
            that.timeList = res.data.data
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    getData: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/Doctor/Index')
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.doctorData = res.data.data
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'proDataModify',
        params: {
          doctorindex: scope.row.doctorindex
        }
      })
    },
    Sumbit: function () {
      var that = this
      that.$pub.open()
      for (var i = 0; i < that.timeList.length; i++) {
        for (var j = 0; j < that.timeList[i].doctorList.length; j++) {
          if (that.timeList[i].doctorList[j].weekModel.time === '0') {
            that.timeList[i].doctorList.splice(j, 1)
          }
        }
      }
      var DutydayInfo = JSON.stringify(that.timeList)
      axios.post('/gp/Dutyday/AddPost', qs.stringify({
        DutydayInfo: DutydayInfo
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.$pub.messageTwo(res.data.data)
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    }
  },
  mounted () {
    this.getData()
    const date = new Date()
    this.starttime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
  }
}
</script>
